<template>
  <div class="Index">
    <div class="IndexFistDiv">
      <div class="IndexFistDivLeftDiv">
        <h1>小红窝</h1>
        <p>最新资讯、最热话题、最难搞的技术</p>
        <p>随时随地，猥琐发育照样浪</p>
      </div>
      <img src="../img/index1.jpg" width="20%" class="IndexFistDivRightImg">
      <div style="clear:both;"></div>
    </div>
    <div class="IndexLastDiv">
      <div style="height:10px"></div>
      <el-carousel :interval="4000" type="card" :height="bannerHeight+'px'">
        <el-carousel-item v-for="item in items" :key="item">
          <img v-bind:src='item' height="530px" ref="bannerHeight" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
    export default {
      name: "Index",
      data(){
        return{
          bannerHeight:'',
          items:[
            require("../img/lunbo1.jpg"),
            require("../img/lunbo2.jpg"),
            require("../img/lunbo3.jpg"),
            require("../img/lunbo4.jpg")
          ]
        }
      },
      methods:{
        imgLode(){
          this.$nextTick(()=>{
            this.bannerHeight=this.$refs.bannerHeight[0].clientHeight;
            console.log(this.$refs.bannerHeight[0].height);
          })
        }
      },
      mounted() {
        this.imgLode();
      }
    }
</script>

<style scoped>
  .IndexFistDivLeftDiv{
    display: inline-block;
    float: left;
    margin: 12% 0px 0px 12%;
    text-align:left ;
  }
  .IndexFistDivLeftDiv p{
    font-size: 25px;
    font-family: 华文行楷;
  }
  .IndexFistDivLeftDiv h1{
    margin-bottom: 12%;
  }

  .IndexFistDivRightImg{
    float: right;
    margin: 85px 6% 0px 0px;

  }
  .IndexLastDiv{
    margin-top: 2%;
    background-color: pink;
  }



</style>
